<template>
	<view class="butterfly-father">
		<view id="butterfly">
			<view class="leftSide"></view>
			<view class="body"></view>
			<view class="rightSide"></view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style>
	.butterfly-father {
		transform: scale(1);
		position: absolute;
		top: 600upx;
		left: 290upx;
	}

	#butterfly {
		width: 600upx;
		height: 500upx;
		position: relative;
		transform: scale(0.7);
		transform-style: preserve-3d;
	}

	.leftSide {
		width: 267px;
		height: 421px;
		background: url("") no-repeat;
		position: absolute;
		left: -273px;
		top: -250px;
		animation: left 2s infinite;
		z-index: 9999;
	}

	@keyframes left {
		0% {
			transform: rotateY(0deg);
			transform-origin: right center;
			perspective: 201px;
		}

		50% {
			transform: rotateY(70deg);
			transform-origin: right center;
			perspective: 201px;
		}

		100% {
			transform: rotateY(0deg);
			transform-origin: right center;
			perspective: 201px;
		}
	}

	@keyframes right {
		0% {
			transform: rotateY(0);
			transform-origin: left center;
			perspective: 201px;
		}

		50% {
			transform: rotateY(-70deg);
			transform-origin: left center;
			perspective: 201px;
		}

		100% {
			transform: rotateY(0);
			transform-origin: left center;
			perspective: 201px;
		}
	}

	.body {
		width: 152px;
		height: 328px;
		background: url("") no-repeat;
		position: absolute;
		margin: auto;
		left: -290px;
		right: 0;
		bottom: 300px;
		top: 0;
		z-index: 9999;
	}

	.rightSide {
		width: 284px;
		height: 460px;
		background: url("") no-repeat;
		position: absolute;
		right: 18px;
		top: -222px;
		animation: right 2s infinite;
		z-index: 9999;
	}
</style>
